<template>
  <s-layout title="快捷支付">
    <view class="fask-box">
      <view class="goods-info ss-p-t-50 ss-p-b-30">
        <view class="ss-flex-col ss-col-center ss-m-b-50">
          <view class="ss-font-32">订单金额(元)</view>
          <view class="ss-font-40 ss-m-t-10">{{ state.pay_fee }}</view>
        </view>
        <view class="ss-flex ss-row-between ss-p-20 ss-font-30">
          <view :style="{ color: 'rgba(0,0,0,.4)' }">商户名称</view>
          <view>{{ state.merchant }}</view>
        </view>
        <view class="ss-flex ss-row-between ss-p-20 ss-font-30">
          <view :style="{ color: 'rgba(0,0,0,.4)' }">订单编号</view>
          <view>{{ state.order_sn }}</view>
        </view>
        <view class="ss-flex ss-row-between ss-p-20 ss-font-30">
          <view :style="{ color: 'rgba(0,0,0,.4)' }">订单时间</view>
          <view>{{ state.order_time }}</view>
        </view>
      </view>
      <view
        class="fask-tips ss-flex ss-row-between ss-p-l-20 ss-p-r-20 ss-p-t-30 ss-p-b-30"
      >
        <view>请选择支付银行卡</view>
        <uv-icon
          name="arrow-right"
          size="30rpx"
          label="全部"
          label-pos="left"
          @click="handleAllCard"
        />
      </view>
      <view class="bg-white">
        <uv-radio-group
          v-model="state.token_no"
          border-bottom
          placement="column"
          icon-placement="right"
        >
          <uv-radio
            v-for="(item, index) in cardList"
            :key="index"
            :name="item.token_no"
            :label="item.bank_info.bank_name"
            label-size="30rpx"
            :custom-style="{
              padding: '20rpx',
            }"
          />
        </uv-radio-group>
      </view>
      <view class="bg-white ss-p-22 ss-font-30 ss-flex ss-row-between" @click="addBank">
        <view>添加银行卡付款</view>
        <uv-icon name="arrow-right" size="30rpx" />
      </view>
      <view v-if="state.token_no" class="fask-tips ss-flex ss-p-l-20 ss-p-t-30 ss-p-b-30">
        为保障您的资金安全，该笔交易需要短信验证。
      </view>
      <view v-if="state.token_no" class="bg-white ss-p-18">
        <uv-input
          v-model="state.sms_code"
          :maxlength="6"
          type="number"
          placeholder="请输入验证码"
          border="none"
          clearable
        >
          <template v-slot:prefix>
            <uv-text text="验证码" margin="0 40rpx 0 0" color="#303133" />
          </template>
          <template v-slot:suffix>
            <uv-code
              ref="codeRef"
              @change="(text) => (tips = text)"
              seconds="60"
              changeText="X秒重新获取"
            />
            <uv-button @click="getCode" :text="tips" type="success" size="mini" />
          </template>
        </uv-input>
      </view>
      <su-fixed bottom placeholder bg="none">
        <view class="footer-box ss-p-20">
          <button class="ss-rest-button logout-btn" @tap="onSubmit">确认支付</button>
        </view>
      </su-fixed>
    </view>
  </s-layout>
</template>
<script setup>
import { ref, reactive } from "vue";
import { onLoad, onShow } from "@dcloudio/uni-app";
import { toast } from "@/uni_modules/uv-ui-tools/libs/function/index.js";
import sheep from "@/sheep";

const state = reactive({
  pay_fee: "", // 订单金额
  order_sn: "", // 订单编号
  order_time: "", // 订单时间
  merchant: "成都本草之源生物科技有限公司", // 商户名称
  user_huifu_id: "", // 用户编号
  token_no: "", // 银行卡编号
  sms_code: "", // 验证码
  req_seq_id: "", // 流水号
});
const cardList = ref([]); // 银行卡列表

const codeRef = ref(null); // 验证码组件
const tips = ref("获取验证码"); // 验证码提示

onLoad((e) => {
  state.order_sn = e.order_sn;
  state.pay_fee = e.pay_fee;
  state.order_time = e.order_time;
});

onShow(() => {
  getBankList();
});

// 获取已绑定银行列表
const getBankList = () => {
  sheep.$api.pay.quickbuckleQuery().then((res) => {
    state.user_huifu_id = res.data.user_huifu_id;
    cardList.value = res.data.card_list;
  });
};

// 获取验证码
const getCode = () => {
  if (codeRef.value.canGetCode) {
    let data = {
      user_huifu_id: state.user_huifu_id,
      order_sn: state.order_sn,
      token_no: state.token_no,
    };
    sheep.$api.pay.quickpayApply(data).then((res) => {
      state.req_seq_id = res.data.req_seq_id;
      codeRef.value.start();
    });
  } else {
    toast("倒计时结束后再发送");
  }
};

// 确认支付
const onSubmit = () => {
  if (!state.token_no) return toast("请选择银行卡");
  if (!state.sms_code) return toast("请输入验证码");
  let data = {
    order_sn: state.order_sn,
    sms_code: state.sms_code,
    req_seq_id: state.req_seq_id,
  };
  sheep.$api.pay
    .quickpayConfirm(data)
    .then((res) => {
      payResult("success");
    })
    .catch((err) => {
      payResult("fail");
    });
};

// 添加银行卡
const addBank = () => {
  sheep.$router.go("/pages/pay/faskBind", {
    order_sn: state.order_sn,
    pay_fee: state.pay_fee,
    order_time: state.order_time,
  });
};

// 跳转银行卡列表
const handleAllCard = () => {
  sheep.$router.go("/pages/pay/bankManager", {
    order_sn: state.order_sn,
    pay_fee: state.pay_fee,
    order_time: state.order_time,
  });
};

// 跳转支付结果
const payResult = (resultType) => {
  sheep.$router.redirect("/pages/pay/result", {
    orderSN: state.order_sn,
    payment: "huipay",
    payState: resultType,
    orderType: "goods",
  });
};
</script>

<style lang="scss" scoped>
.fask-box {
  width: 100%;
  height: 100vh;
  background: #f7f8fa;
  .goods-info {
    width: 100%;
    background: #fff;
  }
  .fask-tips {
    color: #999;
    font-size: 28rpx;
  }
}
button {
  color: #fff;
  background-color: #0d6eff;
}
</style>
